<template>
  <div class="main-container">
    <header>
      <h1>编辑职务信息</h1>
    </header>
    <div class="form-container">
      <div class="form-group">
        <label for="jobTitle">职务名称</label>
        <input id="jobTitle" v-model="formData.jobTitle" type="text" class="form-input" placeholder="请输入职务名称"/>
      </div>
      <div class="form-group">
        <label for="jobCategory">职务分类</label>
        <input id="jobCategory" v-model="formData.jobCategory" type="text" class="form-input" placeholder="请输入职务分类"/>
      </div>
      <div class="form-group">
        <label for="salary">薪水</label>
        <input id="salary" v-model="formData.salary" type="text" class="form-input" placeholder="请输入薪水"/>
      </div>
      <div class="form-group">
        <label for="companyAddress">公司地址</label>
        <input id="companyAddress" v-model="formData.companyAddress" type="text" class="form-input" placeholder="请输入公司地址"/>
      </div>
      <div class="form-group">
        <label for="details">详细信息</label>
        <textarea id="details" v-model="formData.details" class="form-input" placeholder="请输入详细信息"></textarea>
      </div>
      <div class="form-group">
        <label for="contactPerson">联系人</label>
        <input id="contactPerson" v-model="formData.contactPerson" type="text" class="form-input" placeholder="请输入联系人"/>
      </div>
      <div class="form-group">
        <label for="contactPhone">联系电话</label>
        <input id="contactPhone" v-model="formData.contactPhone" type="text" class="form-input" placeholder="请输入联系电话"/>
      </div>
      <div class="button-container">
        <div @click="handleSubmit" class="clickable-box">
          提交
        </div>
      </div>
    </div>

    <!-- 提交状态提示 -->
    <div v-if="submissionMessage" class="submission-message">
      {{ submissionMessage }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      formData: {
        jobTitle: '',
        jobCategory: '',
        salary: '',
        companyAddress: '',
        details: '',
        contactPerson: '',
        contactPhone: ''
      },
      submissionMessage: ''
    };
  },
  created() {
    this.loadFormData();
  },
  methods: {
    loadFormData() {
      // 从路由中获取数据并初始化表单数据
      const jobData = this.$route.query;
      if (jobData) {
        this.formData = {
          jobTitle: jobData.title || '',
          jobCategory: jobData.jobCategory || '',
          salary: jobData.salary || '',
          companyAddress: jobData.location || '',
          details: jobData.description || '',
          contactPerson: jobData.contactPerson || '',
          contactPhone: jobData.contactPhone || ''
        };
      }
    },
    handleSubmit() {
      // 检查是否所有字段都已填写
      const allFilled = Object.values(this.formData).every(field => field.trim() !== '');

      if (allFilled) {
        axios.post('http://localhost:8099/api/update-job', this.formData)
            .then(response => {
              this.submissionMessage = '提交成功';
              // 可以在这里添加额外的代码来处理成功的响应，例如重置表单或导航到其他页面
            })
            .catch(error => {
              this.submissionMessage = '提交失败，请重试';
              console.error('提交错误:', error);
            });
      } else {
        this.submissionMessage = '有内容尚未填写';
      }
    }
  }
};
</script>

<style>
.main-container {
  text-align: center;
  padding: 20px;
}

.form-container {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px; /* 间隔 */
  margin: 20px auto;
  max-width: 600px; /* 控制宽度 */
}

.form-group {
  width: 100%;
}

label {
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
  text-align: left;
}

.form-input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

textarea.form-input {
  height: 100px;
  resize: vertical;
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.clickable-box {
  font-size: 18px;
  padding: 10px 30px;
  background-color: #f8f9fa;
  border: 1px solid #333;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s;
}

.clickable-box:hover {
  background-color: #e2e6ea;
}

.clickable-box:active {
  background-color: #d6d9db;
}

.submission-message {
  margin-top: 20px;
  font-size: 18px;
  color: #ff0000;
}
</style>